<template>
	<!--指派单人-->
	<view class="page-content">
		<view class="page-top" scroll-y v-if="sel_list && sel_list.length>0"
			:style="{height:sel_list.length>5?'340rpx':(sel_list.length>0 || sel_list.length<=5)?'180rpx':'0'}">
			<!--筛选框-->
			<view class="top-box-ul">
				<block v-for="(ite,ind) in sel_list" :key="ind">
					<view  class="top-box-li" @click="changecheck(ite.id,ite.checked)">
						<image class="li-img" :src="ite.img  || $mAssetsPath.icon_mrtx" mode="aspectFill"></image>
						<view class="li-txt">{{ ite.nickname }}</view>
						<view class="li-index">{{ind+1}}</view>
						<image class="li-icon" :src="$mAssetsPath.icon_sc3"></image>
					</view>
				</block>
			</view>
		</view>
		<scroll-view class="page-body" :scroll-top="scrollTop" scroll-y="true" @scrolltolower="loadmore()">
			<!--动态-->
			<template v-if="sel_data && sel_data.length > 0 ">
				<view v-if="type === 'c' || type === 'e'">
					<block v-for="(item,index) in sel_data" :key="index">
						<view class="body-box">
							<con-li :obj="item" @tochecked="tochecked" :is_check="true"></con-li>
						</view>
					</block>
				</view>
				<view class="phone-list" v-if="type === 'd'">
					<view class="list-item" v-for="(item, index) in sel_data" :key="index">
						<view class="list-item-title" v-if="item.pho.length>0">{{item.name}}</view>
						<view class="list-item-phone" v-for="(ite,ind) in item.pho" :key="ind">
							<view class="item-li" @click.stop="tochecked(ite.uid,ite.checked)">
								<view class="item-li-l">
									<image class="li-img" :src="ite.img || $mAssetsPath.icon_mrtx" mode="aspectFill">
									</image>
									<view class="li-txt">{{ ite.nickname }}<text class="li-tag"
											v-if="ite.role_name != null">{{ite.role_name}}</text></view>
								</view>
								<view class="item-li-r">
									<image class="icon-check"
										:src="ite.checked ? $mAssetsPath.icon_check_on : $mAssetsPath.icon_check"
										mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 上拉加载 -->
				<view class="det-con-more">
					<load-more :loadmore="load_more1"></load-more>
				</view>
			</template>
			<!--无数据-->
			<empty v-else no-full type="noData"></empty>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import {
		getDesignators, //指派
		getGroupLists, //分组
		getMailLists, //供应商列表
	} from '@/common/api.js';
	import loadMore from '@/components/uni-load-more/load-more.vue';
	import conLi from '@/pages/components/contact_li.vue';
	export default {
		components: {
			loadMore,
			conLi
		},
		data() {
			return {
				scrollTop: 0,
				noData: false,
				load_more1: '', //下拉加载文字
				load_sta: false, //是否是加载状态
				sel_data: [],
				sel_list: [],
				type: '',
				id: '',
				params: {
					flow_path_id: '',
					company_id: '',
					id: '',
					type: ''
				},
				is_index: false,
			}
		},
		computed: {
			...mapGetters(['companyInfo', 'userInfo']),
		},
		onShow() {
			this.params.company_id = this.companyInfo.id;
			this.getdata();
		},
		onLoad(option) {
			console.log(222, option)
			if (option.flow_path_id) {
				this.params.flow_path_id = option.flow_path_id;
			}
			if (option.type) {
				this.type = option.type;
			}
			if (option.id) {
				this.id = option.id;
				this.params.id = option.id;
			}
		},
		onNavigationBarButtonTap(e) {
			console.log(23, e)
			if (e.index == 0) {
				this.$util.prePage().resdata2(this.type, this.id, this.sel_list);
				setTimeout(() => {
					uni.navigateBack({
						delta: 1,
					})
				}, 500)
			}
		},
		methods: {
			getdata() {
				if (this.type === 'c') {
					const {
						flow_path_id,
						id,
						company_id
					} = this.params;
					getDesignators({
						flow_path_id,
						id,
						company_id
					}).then(res => {
						if (res.code === 2000) {
							//this.sel_data = res.data;
							const data = res.data;
							this.sel_data = data.map((item) => ({
								...item,
								checked: false
							}))
							console.log(1111, this.sel_data)
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none',
								duration: 2000
							})
						}
					})
				} else if (this.type === 'd') {
					this.params.type = 2;
					//获取分组
					getGroupLists({
						company_id: this.params.company_id,
						type: this.params.type
					}).then(res => {
						if (res.code === 2000) {
							let objlist = []
							if (res.data && res.data.length > 0) {
								res.data.forEach(ite => {
									objlist.push(ite)
								})
							}
							getMailLists(this.params).then(res2 => {
								if (res2.code === 2000) {
									let list = res2.data;
									if (objlist && objlist.length > 0) {
										objlist.forEach(item => {
											let pho = []
											this.$set(item, 'pho', Array)
											this.$set(item, 'no', 'a' + item.id)
											if (list && list.length > 0) {
												list.forEach(item2 => {
													this.$set(item2, 'checked', false)
													if (item2.group_id === item.id) {
														pho.push(item2)
													} else if (item2.group_id == null &&
														item.id === 0) {
														pho.push(item2)
													}
												})
											}
											item.pho = pho;
										})
									}
									this.sel_data = objlist;
									this.$forceUpdate() //二维数组，开启强制渲染
									console.log(222222, this.sel_data)
								}
							})
						}
					})
				} else if (this.type === 'e') {
					this.params.type = 2;
					getMailLists(this.params).then(res2 => {
						if (res2.code === 2000) {
							let group_id = '';
							const resdata = res2.data.map(x => {
								if (this.userInfo.group_id === x.group_id) {
									return x
								}
							})
							const data = resdata.filter(Boolean);
							this.sel_data = data.map((item) => ({
								...item,
								checked: false
							}))
							this.is_index = true; //开启序号
							this.$forceUpdate() //二维数组，开启强制渲染
						}
					})
				}
			},
			changecheck(id, checked) {
				if (this.type === 'c') {
					if (this.sel_data && this.sel_data.length > 0) {
						this.sel_data.forEach(item => {
							if (item.id === id) {
								item.checked = !checked;
							} else {
								item.checked = false;
							}
						})
					}
				} else if (this.type === 'd') {
					if (this.sel_data && this.sel_data.length > 0) {
						this.sel_data.forEach(item => {
							if (item.pho && item.pho.length > 0) {
								item.pho.forEach(ite => {
									if (ite.uid === id) {
										ite.checked = !checked;
									} else {
										ite.checked = false;
									}
								})
							}
						})
					}

				} else if (this.type === 'e') {
					if (this.sel_data && this.sel_data.length > 0) {
						this.sel_data.forEach(item => {
							if (item.id === id) {
								item.checked = !checked;
							}
						})
					}
					if (this.sel_data && this.sel_data.length > 0) {
						this.sel_data.forEach((item, i) => {
							if (item.id === id) {
								if (!checked === true) {
									this.sel_list.push(item)
								}else if(!checked === false){
									this.sel_list.forEach((K2,v2)=>{
										if(this.sel_list[v2].id == this.sel_data[i].id){
											delete this.sel_list[v2]
										}
									})
									console.log(this.sel_data[i],this.sel_list)
									this.sel_list = this.sel_list.filter(Boolean);
								}
							}
						})
					}
				}
			},
			tochecked(id, checked) {
				console.log(111, id, checked)
				if (this.type === 'c') {
					if (this.sel_data && this.sel_data.length > 0) {
						this.sel_data.forEach(item => {
							if (item.id === id) {
								item.checked = !checked;
							} else {
								item.checked = false;
							}
						})
					}
					let sel_list = []
					if (this.sel_data && this.sel_data.length > 0) {
						this.sel_data.forEach((item, i) => {
							if (item.checked === true) {
								sel_list.push(item)
							}
						})
						this.sel_list = sel_list;
					}
				} else if (this.type === 'd') {
					if (this.sel_data && this.sel_data.length > 0) {
						this.sel_data.forEach(item => {
							if (item.pho && item.pho.length > 0) {
								item.pho.forEach(ite => {
									if (ite.uid === id) {
										ite.checked = !checked;
									} else {
										ite.checked = false;
									}
								})
							}
						})
					}
					let sel_list = []
					if (this.sel_data && this.sel_data.length > 0) {
						this.sel_data.forEach(item => {
							if (item.pho && item.pho.length > 0) {
								item.pho.forEach(ite => {
									if (ite.checked) {
										sel_list.push(ite)
									}
								})
							}
						})
						this.sel_list = sel_list;
					}
				} else if (this.type === 'e') {
					if (this.sel_data && this.sel_data.length > 0) {
						this.sel_data.forEach(item => {
							if (item.id === id) {
								item.checked = !checked;
							}
						})
					}
					
					if (this.sel_data && this.sel_data.length > 0) {
						this.sel_data.forEach((item, i) => {
							if (item.id === id) {
								if (!checked === true) {
									this.sel_list.push(item)
								}else if(!checked === false){
									this.sel_list.forEach((K2,v2)=>{
										if(this.sel_list[v2].id == this.sel_data[i].id){
											delete this.sel_list[v2]
										}
									})
									console.log(this.sel_data[i],this.sel_list)
									this.sel_list = this.sel_list.filter(Boolean);
								}
							}
						})
					}
					console.log(222222,this.sel_list)
				}

			},
			/* tosel(item){
				this.$util.prePage().resdata2(item);
				setTimeout(() => {
					uni.navigateBack({
						delta: 1,
					})
				}, 500)
			}, */
			loadmore() {

			},
		}
	}
</script>

<style lang="scss">
	.page-content {
		width: 100vw;
		height: 100%;
		background: $uni-bg-color-grey;

		.page-top {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			background: $uni-bg-color;
			border-bottom: 1rpx solid #eee;
			overflow: hidden;
			padding-top: 10rpx;

			.top-box-ul {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 0 30rpx;

				.top-box-li {
					display: flex;
					position: relative;
					flex-direction: column;
					width: 116rpx;
					margin: 0 20rpx 10rpx 0;

					.li-icon {
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						right: 0;
						top: 0;
					}

					.li-index {
						width: 36rpx;
						height: 36rpx;
						border-radius: 18rpx;
						text-align: center;
						color: #fff;
						position: absolute;
						left: -18rpx;
						top: 50rpx;
						font-size: 22rpx;
						background: #198FFF;
					}

					.li-img {
						width: 80rpx;
						height: 80rpx;
						margin-top: 30rpx;
						margin-bottom: 4rpx;
						border-radius: 40rpx;
					}

					.li-txt {
						width: 80rpx;
						text-align: center;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 24rpx;
						font-weight: 400;
						color: $font-color-3;
					}
				}

				.top-box-li:nth-of-type(5n) {
					margin: 0 0 10rpx 0;
				}
			}
		}

		.page-body {
			display: flex;
			height: 100%;
			padding-top: 20rpx;

			.body-box {
				display: flex;
				flex-direction: column;
				background: $uni-bg-color;
				padding: 0 30rpx;
			}

			.con-text {
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				color: #666;
				line-height: 50rpx;

				image {
					width: 100% !important;
					max-width: 100% !important;
				}
			}
		}
	}

	.phone-list {
		display: flex;
		background-color: #fff;
		flex-direction: column;
		position: relative;
		width: 100%;
		height: 100%;
		padding-bottom: 60rpx;

		.list-item {
			width: 100%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			background-color: #fff;
		}
	}



	.list-item>.list-item-phone {
		font-weight: normal;
	}

	.list-item-title {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		background: $uni-bg-color-grey;
		font-size: 28rpx;
		font-weight: 400;
		color: $font-color-3;
		padding: 0 24rpx;
	}

	.list-item-phone {
		width: 100%;
		display: flex;
		flex-direction: column;
		font-size: 32upx;
		font-weight: bold;
		padding: 0 24upx;
		border-bottom: 1px solid #F2F4F5;

		.item-li-l {
			width: 100%;
			display: flex;
			align-items: center;
			height: 120upx;
			line-height: 120upx;

			.li-img {
				width: 80rpx;
				height: 80rpx;
				margin-right: 24rpx;
				border-radius: 10rpx;
			}

			.li-txt {
				font-size: 32rpx;
				color: $font-color-3;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				.li-tag {
					margin-left: 20rpx;
					height: 28rpx;
					border: 1rpx solid $border-color-blue;
					border-radius: 4rpx;
					padding: 0 10rpx;
					font-size: 20rpx;
					font-weight: 400;
					line-height: 26rpx;
					color: $font-color-b3;
				}
			}
		}

		.item-li {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 120rpx;
			background: #fff;
			width: 100%;

			.item-li-l {
				width: calc(100% - 80rpx);
				display: flex;
				align-items: center;

				.li-img {
					width: 80rpx;
					height: 80rpx;
					margin-right: 24rpx;
					border-radius: 10rpx;
				}

				.li-txt {
					font-size: 32rpx;
					color: $font-color-3;

					.li-tag {
						margin-left: 20rpx;
						height: 28rpx;
						border: 1rpx solid $border-color-blue;
						border-radius: 4rpx;
						padding: 0 10rpx;
						font-size: 20rpx;
						font-weight: 400;
						line-height: 28rpx;
						color: $font-color-b3;
					}
				}
			}

			.item-li-r {
				display: flex;
				justify-content: flex-end;
				width: 80rpx;

				.icon-check {
					width: 36rpx;
					height: 36rpx
				}
			}
		}
	}
</style>
